<!--
* @Description 前端截图,ScreenshotIndex
* @author 三咲问道
* @date 2025/6/4
-->

<template>
  <div class="ScreenshotIndex">
    <div class="title">前端截图</div>
    <el-button type="text" @click="gotoHtml2canvas">html2canvas链接</el-button>
    <div class="content" ref="screenArea">
      <!--   切图区域   -->
      <div class="main">前端截图,通过html2canvas</div>
      <!--   触发截图  -->
    </div>
    <el-button type="primary" @click="cropScreen">截图并保存</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import html2canvas from "html2canvas";

const screenArea = ref<HTMLElement | null>(null)

/**  开始截图 */
const cropScreen = async () => {
  if (screenArea.value) {
    const canvas = await html2canvas(screenArea.value);
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'screenshot.png';
    link.click()
  }

}

/**  html2canvas 页面 */
const gotoHtml2canvas = ()=>{
  window.open('https://www.html2canvas.cn/', '_blank');
}
</script>

<style scoped lang="less">
.ScreenshotIndex {
  .content {
    width: 400px;
    height: 400px;
    margin: 40px auto;
    background-color: #9bbbac;

    .main {
      line-height: 20px;
      text-align: center;
      padding: 20px;
      font-size: 16px;
      color: #ffffff;
    }
  }
}
</style>